<template>
  <div class="CareerPlan">
    <div class="CareerPlan_boxtop">
      <div class="CareerPlan_top">
        <div class="CareerPlan_top_box">
          <router-link to="/">
            <img
              class="CareerPlan_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="CareerPlan_top_content">生涯规划</div>
        </div>
      </div>
    </div>
    <div class="CareerPlan_bottom">
      <div class="CareerPlan_boxbottom">
        <div class="CareerPlan_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>生涯规划</span>
        </div>
        <div class="CareerPlan_text">
          <router-link
            :to="{
                name: '/OccupationTest/TestQuestion',
                query:{
                    TestType : 0
                }
              }"
            tag="div"
            class="character"
          >
            <div class="role">
              <span class="role_people">ISTJ检察员</span>
              <span class="jiantou">
                <div class="el-icon-arrow-right"></div>
              </span>
            </div>
            <div class="character_text">MBTI性格测试</div>
          </router-link>

          <!-- <div class="Interest">
            <div class="role">
              <span class="role_people">ISTJ检察员</span>
              <span class="jiantou">
                <div class="el-icon-arrow-right"></div>
              </span>
            </div>
            <div class="character_text">MBTI性格测试</div>
          </div>-->
        </div>
        <div class="content_title">一一找到真正合适自己的专业一一</div>
        <div class="content1">据统计，每年都有70%大学生后悔当初选择的志愿。究其原因，是因为当初没有真正找到适合自己的专业。</div>
        <div class="content2">慧择云志愿联合国际权威评测机构，推出适用于选择专业的性格和兴趣测评。帮你从生涯规划的角度科学填志愿。</div>
        <!-- <div class="Voluntary_box">
        <div class="Alternative_wish">
            <div class="Voluntary_logo">123</div>
            <div class="Voluntary_title">备选志愿</div>
        </div>
        <div class="Voluntary_form">
            <div class="Voluntary_logo">123</div>
            <div class="Voluntary_title">备选志愿</div>
        </div>
        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CareerPlan",
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
.CareerPlan {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.CareerPlan_boxtop {
  width: 1200px;
  margin: 0 auto;
  height: 68.6px;
}
.CareerPlan_top {
  height: 68.6px;
}
.CareerPlan_top_box {
  width: 170.6px;
  height: 68.6px;
}
.CareerPlan_top_logo {
  width: 50px;
  padding-top: 12.5px;
  margin-right: 24px;
}
.CareerPlan_top_content {
  display: inline;
  font-size: 22px;
  color: #515151;
  float: right;
  line-height: 68.6px;
}
.CareerPlan_bottom {
  width: 100%;
  background-color: #f6f6f6;
}
.CareerPlan_boxbottom {
  width: 1200px;
  margin: 0 auto;
}
.CareerPlan_bottom_option {
  padding-top: 27px;
  padding-bottom: 60px;
}
span {
  color: #757575;
  font-size: 15px;
}
.router-link-active {
  text-decoration: none;
}
.CareerPlan_text {
  width: 969px;
  margin: 0 auto;
  margin-bottom: 67.5px;
  overflow: hidden;
  .character {
    width: 462.5px;
    height: 156px;
    background-color: #20aee5;
    float: left;
    margin-right: 44px;
    border-radius: 8px;
    .role {
      padding-top: 54px;
      margin-left: 64.5px;
      .role_people {
        font-size: 18px;
        color: #ffffff;
        font-weight: normal;
        margin-right: 194px;
      }
      .jiantou {
        display: inline-block;
        border-radius: 100%;
        height: 18px;
        width: 18px;
        background-color: #ffffff;
        .el-icon-arrow-right {
          margin-left: 3px;
          line-height: 18px;
          color: #33b4e6;
        }
      }
    }
    .character_text {
      margin-top: 14px;
      margin-left: 64.5px;
      color: #ffffff;
      font-size: 14px;
      font-weight: normal;
    }
  }
  .Interest {
    width: 462.5px;
    height: 156px;
    background-color: #2e86ff;
    float: left;
    border-radius: 8px;
    .role {
      padding-top: 54px;
      margin-left: 64.5px;
      .role_people {
        font-size: 18px;
        color: #ffffff;
        font-weight: normal;
        margin-right: 194px;
      }
      .jiantou {
        display: inline-block;
        border-radius: 100%;
        height: 18px;
        width: 18px;
        background-color: #ffffff;
        .el-icon-arrow-right {
          margin-left: 3px;
          line-height: 18px;
          color: #33b4e6;
        }
      }
    }
    .character_text {
      margin-top: 14px;
      margin-left: 64.5px;
      color: #ffffff;
      font-size: 14px;
      font-weight: normal;
    }
  }
}
.content_title {
  text-align: center;
  margin-bottom: 37px;
  font-size: 19px;
  color: #959595;
}
.content1,
.content2 {
  text-align: center;
  font-size: 17px;
  color: #959595;
}
.content1 {
  margin-bottom: 18.5px;
}
.content2 {
  padding-bottom: 305px;
}
.Voluntary_box {
  float: right;
}
.Alternative_wish {
  width: 68px;
  height: 68px;
  background-color: #2e86ff;
  border-radius: 9px;
  margin-bottom: 8px;
}
.Voluntary_form {
  width: 68px;
  height: 68px;
  background-color: #2e86ff;
  border-radius: 9px;
  margin-bottom: 66px;
}
</style>